<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>51VR</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body {
        margin: 0;
        padding: 0;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* background-color: black; */
        /* font-size: 12px; */
    }

    .title {
        width: 280px;
        height: 33px;
        line-height: 33px;
        background: linear-gradient(225deg, transparent 8px, #f1f1f1 0);
        /* border: 1px solid red; */
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        text-shadow: 2px 2px #FFF;
    }

    .cover {
        position: relative;
    }

    /* .cover::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    border: 5px solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
  } */

    .content {
        width: 280px;
        height: 23px;
        background-color: rgb(248, 246, 242);
        /* border: 1px solid red; */
        display: none;
    }

    .content-checked {
        width: 270px;
        /* height: 410px; */
        background-color: rgba(248, 246, 242, 0.5);
        margin: 5px 0 0 5px;
        outline: 1px solid rgba(248, 246, 242);
        outline-offset: 3px;
        /* border: 1px solid red; */

    }

    ul {
        display: flex;
        flex-direction: column;
        margin-top: -4px;
        margin-left: 4px;
        /* border: 1px solid red; */
    }

    li {
        margin: 5px 0;
    }


    .span-title {
        font-size: 20px;
        color: black;
        font-weight: bold;

    }

    .span-extra {
        font-size: 16px;
        color: #808080;

    }

    .image {
        height: 180px;
        width: 270px;
    }

    .icon {
        display: flex;
        width: 25px;
        height: 25px;
        margin-right: 10px;
        /* border: 1px solid red; */
    }
</style>

<body>
    <div id="app">

    </div>
    <script>
        let template = parseHTMLTemplate(function() {
            /*
             <div id="app">
                <div id="title" class="title cover">
                  <image id="icon" class="icon">
                  ${queryTitle}</div>
                <div id="content" class="content">
                  <span id="default" class="span-default"></span>
                  <image class="image" id="image" />
                  <ul>
                    <li>
                      <div class="span-title">${title1}</div>
                      <div class="span-extra">${extra1}</div>
                    </li>
                    <li>
                      <div class="span-title">${title2}</div>
                      <div class="span-extra">${extra2}</div>
                    </li>
                    <li>
                      <div class="span-title">${title3}</div>
                      <div class="span-extra">${extra3}</div>
                    </li>
                    <li>
                      <div class="span-title">${title4}</div>
                      <div class="span-extra">${extra4}</div>
                    </li>
                  </ul>
                </div>
              </div>
            */
        });

        let objectTep = render();
        let newHTML = template(objectTep);
        document.getElementById('app').innerHTML = newHTML;
        document.getElementById('image').src = objectTep.imageurl;
        document.getElementById('icon').src = location.origin + '/static/Bridge_3.png';

        // document.getElementById('icon').style.background = "url(" + document.location.origin + '/static/Bridge_3.png' +
        //   ") no-repeat left top";



        let title = document.getElementById('title');
        let content = document.getElementById('content');
        title.onclick = function(val) {
            let className = content.className;
            let value = content.innerHTML;
            let classNameEnd = '';
            if (className === 'content') {
                classNameEnd = 'content-checked'
                document.getElementById('title').style.background = "transparent";
                document.getElementById('default').style.display = "none";
                // console.log(document.getElementById('image'), 1111);

                // document.getElementById('image').src = objectTep.imageurl
            } else {
                classNameEnd = 'content'
                //console.log(document.getElementsByClassName('image'), 'imgae-----');
                document.getElementById('title').style.background = "linear-gradient(225deg, transparent 8px, #f1f1f1 0)";

                document.getElementById('default').style.display = "block";
            }
            content.setAttribute('class', classNameEnd)
        }
        //获取html后面的参数列表
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
        //解析模板字符串
        function parseHTMLTemplate(functionObject) {
            return function(scope) {
                return functionObject.toString().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function(variable) {
                    var value = scope;
                    variable = variable.replace('${', '').replace('}', '');
                    variable.split('.').forEach(function(section) {
                        value = value[section];
                    });
                    return value;
                });
            }
        };



        function render() {
            //需要传入的参数 1.类型 2.title 3.数组content
            let obj = GetRequest();
            console.log(obj.content);

            let content = JSON.parse(obj.content);
            console.log(content);
            let awardachieved = content.awardachieved;
            let urlHead = location.origin + '/static/bridge/'
            switch (awardachieved) {
                case 'Platinum':
                    awardachieved = urlHead + 'Platinum_Item.png';
                    break;
                case 'GOLD plus':
                    awardachieved = urlHead + 'GoldPlus_Item.png';
                    break;
                case 'Certified':
                    awardachieved = urlHead + 'Certified_Item.png';
                    break;
                case 'Gold':
                    awardachieved = urlHead + 'Gold_Item.png';
                    break;
                default:
                    awardachieved = urlHead + 'Certified_Item.png';
                    break;
            }

            //内容对象
            return {
                'queryTitle': content.name,
                'queryContent': content.name,
                'title1': 'Address',
                'extra1': content.address,
                'title2': 'Device Category',
                'extra2': content.devicecategory,
                'title3': 'Device Type',
                'extra3': content.devicetype,
                'title4': 'EQuipment Num',
                'extra4': content.equipmentnum,
                'imageurl': content.imageurl
                // 'title5': '222',
                // 'extra5': content.maintenancecompany,
            }
        }
    </script>
</body>

</html>